<template>
  <div>
    <slider class="adv-slider" v-if="advList.length && type === 'slider'" :interval="interval" auto-play="true"
            :style="{height: advHeight + 'px'}">
      <div class="adv" v-for="(adv, idx) in advList" v-bind:key="idx" @click="clickAdv(adv)"
           :style="{height: advHeight + 'px'}">
        <image class="adv-img" resize="contain" :src="adv.picUrl"
               :style="{height: advHeight + 'px', width: width + 'px', borderRadius: borderRadius + 'px'}"></image>
      </div>
      <indicator class="adv-indicator" v-if="advList.length > 1" :style="indicatorSize"></indicator>
    </slider>
    <template v-if="advList.length && type === 'ep-slider'">
      <wxc-ep-slider :slider-id="sliderId"
                     :card-length='advList.length'
                     :card-s="cardSize"
                     :auto-play="true"
                     :accessible="true"
                     ref="wxc-ep-slider"
                     :interval="3000"
                     :select-index="epSelectIndex"
                     @wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected">

        <wxc-pan-item class="adv ep-adv" v-for="(adv, idx) in advList"
             v-bind:key="idx"
              @wxcPanItemPan="wxcPanItemPan"
              @wxcPanItemClicked="clickAdv(adv)"
             :slot="`card${idx}_${sliderId}`"
             :style="{height: advHeight + 'px', width: cardSize.width + 'px'}">
          <image class="adv-img ep-adv-img" resize="cover" :src="adv.picUrl"
                 :style="{height: advHeight + 'px', width: cardSize.width + 'px', borderRadius: borderRadius + 'px'}"></image>
        </wxc-pan-item>
      </wxc-ep-slider>
      <div class="indicator">
        <div :class="['indicator-item', idx === epSelectIndex && 'indicator-item-selected']"
             v-for="(adv, idx) in advList" v-bind:key="idx">
        </div>
      </div>
    </template>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  .ep-adv {
    border-radius: 10px;
    overflow: hidden;
  }
  .ep-adv-img {
    /*border-radius: 10px;*/
  }
  .indicator {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
    &-item {
      height: 6px;
      width: 20px;
      background-color: #cdd1d5;
      margin: 0 2px;
      border-radius: 3px;
      &-selected {
        width: 30px;
        background-color: #fc4a5b;
      }
    }
  }
  .adv {
    flex-direction: row;
    justify-content: center;
    position: relative;
    &-slider {
      flex-direction: row;
      justify-content: center;
    }
    &-img {
      height: 1px;
    }
    &-indicator {
      height: 10px;
      item-color: #fff;
      item-selected-color: $color-primary;
      item-size: 10px;
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
    }
  }
</style>
<script>
import { WxcEpSlider, WxcPanItem, BindEnv } from 'weex-ui'
let api = require('../include/api')
const modal = weex.requireModule('modal')
let jumpPage = require('../include/page-jump')
module.exports = {
  props: {
    advList: {default: []},
    width: {default: 750},
    size: {default: ''},
    advSpaceId: {default: ''},
    advSpaceCode: {default: ''},
    borderRadius: {default: 10},
    interval: {default: 5000},
    indicatorSize: {height: 10, 'item-size': 10},
    type: {
      default: 'slider'
    }
  },

  data () {
    const sliderId = Math.floor(Math.random() * 1000000)
    return {
      advHeight: 100,
      advHeights: [],
      epSelectIndex: 0,
      sliderId: sliderId + '',
      cardSize: {
        width: 650,
        height: 300,
        spacing: 0,
        scale: 0.9
      }
    }
  },
  components: {
    WxcEpSlider,
    WxcPanItem
  },
  computed: {

  },
  created () {
    if (this.advSpaceId || this.advSpaceCode) {
      api.advSpace.advList({
        id: this.advSpaceId,
        code: this.advSpaceCode
      }).done(rs => {
        this.handleAdvSize(rs.data.advList)
      })
    } else {
      if (this.advList) {
        this.handleAdvSize(this.advList)
      }
    }
  },
  methods: {
    wxcEpSliderCurrentIndexSelected (e) {
      const index = e.currentIndex
      this.epSelectIndex = index
    },
    handleAdvSize (advList) {
      this.advList = advList
      let rates = []
      advList.forEach((adv) => {
        rates.push(adv.picHeight / adv.picWidth)
      })
      var maxRate = Math.max.apply(null, rates)
      this.advHeight = maxRate * (this.type === 'slider' ? this.width : this.cardSize.width)
      this.cardSize.height = this.advHeight
      this.epSelectIndex = Math.floor(advList.length / 2)
    },
    wxcPanItemPan (e) {
      if (BindEnv.supportsEBForAndroid()) {
        this.$refs['wxc-ep-slider'].clearAutoPlay()
        this.$refs['wxc-ep-slider'].bindExp(e.element)
      }
    },
    wxcPanItemClicked (e) {
      modal.toast({
        message: e.extId,
        duration: 1
      })
    },
    clickAdv (adv) {
      jumpPage({
        page: adv.page,
        params: adv.params
      })
    }
  }
}
</script>
